<template>
  <div id='flow' style='height: 88vh'>
    <!-- <el-row style="margin-left:20px; margin-top:10px;">
      <h3>当前套餐：{{ dqtc }}</h3>
    </el-row> -->
    <el-row :span='24' style="margin-left:20px;margin-top:10px;">
    <el-col :span='2'>
        <h3>分配目标</h3>
      </el-col>
      <el-col :span='12'>
        <el-radio-group v-model="escalationData.target" @change="handleRadioChange">
          <el-radio-button label="1">最小化延迟</el-radio-button>
          <el-radio-button label="2">最小化支付价格</el-radio-button>
          <el-radio-button label="3">负载均衡</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row :span='24' style='padding: 10px'>
      <el-col :span='15' style='padding: 10px;'>
        <el-card style='height: 75vh'>
          <bpmn-modal ref='modal'></bpmn-modal>
        </el-card>
      </el-col>
      <el-col :span='9' style='padding: 10px;'>
        <el-card style='max-height:75vh; overflow-y:scroll;'>
          <h3 style='margin-left:31%'>工作流任务分配列表</h3>
          <el-table v-loading='isLoading' :data="tableData" stripe style="width: 100%;min-height: 65vh">
            <el-table-column prop="taskName" label="任务名称">
            </el-table-column>
            <el-table-column prop="cloudCommerce" label="云商"></el-table-column>
            <el-table-column prop="virtualMachineType" label="实例类型">
            </el-table-column>
            <el-table-column prop="virtualMachineInstance" label="实例规格">
              <template slot-scope='scope'>
                <span>{{scope.row.cpuCoreCount}}核 {{scope.row.memorySize}}G</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script src='./js/index.js'>
</script>
